<template>
  <div class="mt-root">
    <back-top></back-top>
    <nav-header>
      <p class="p">V社区</p>
    </nav-header>
    <loading v-if="showLoading"></loading>
    <div class="show">
      <!--排行榜轮播-->
      <el-carousel :interval="1000" type="card" height="3rem" class="tupian">
        <el-carousel-item v-for="a in  tupian">
          <img :src=a.image alt="">
        </el-carousel-item>
      </el-carousel>

      <div class="content">
        <!--人气榜-->
        <div class="important">
          <div class="moods">
            人气排行榜
            <i class="tu"></i>
            <span class="float"><router-link to="moods">MORE>></router-link></span></div>
          <div v-for="(a,index) in list" class="list">
            <span>{{index+1}}</span>
            <span>{{a.name}}</span>
            <span>{{a.author}}</span>
          </div>
        </div>

        <!--催更榜-->
        <div class="important">
          <div class="moods">
            催更排行榜
            <i class="tu"></i>
            <span class="float"><router-link to="urge">MORE>></router-link></span></div>
          <div v-for="(a,index) in expedite" class="list">
            <span>{{index+1}}</span>
            <span>{{a.name}}</span>
            <span>{{a.author}}</span>
          </div>
        </div>
        <!--收藏榜-->
        <div class="important">
          <div class="moods">
            收藏排行榜
            <i class="tu"></i>
            <span class="float"><router-link to="collect">MORE>></router-link></span></div>
          <div v-for="(a,index) in  enshrine" class="list">
            <span>{{index+1}}</span>
            <span>{{a.name}}</span>
            <span>{{a.author}}</span>
          </div>
        </div>
        <!--点击榜-->
        <div class="important">
          <div class="moods">
            点击排行榜
            <i class="tu"></i>
            <span class="float"><router-link to="click">MORE>></router-link></span></div>
          <div v-for="(a,index) in  dian" class="list">
            <span>{{index+1}}</span>
            <span>{{a.name}}</span>
            <span>{{a.author}}</span>
          </div>
        </div>
        <!--安利排行榜-->
        <div class="important">
          <div class="moods">
            安利排行榜
            <i class="tu"></i>
            <span class="float"><router-link to="anli">MORE>></router-link></span></div>
          <div v-for="(a,index) in  li" class="list">
            <span>{{index+1}}</span>
            <span>{{a.name}}</span>
            <span>{{a.author}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import NavHeader from '../commpoents/NavHeader'
  import BackTop from '../commpoents/BackTop'
  import Loading from '../commpoents/Loading'
  export default {
    data() {
      return {
        list: [],
        expedite: [],
        enshrine: [],
        dian: [],
        li: [],
        showLoading: true,
        tupian: [

          {
            image: "http://pic.maimengjun.com/b931b270621c956a8c5772b347cd6063_54989.jpeg"
          },
          {
            image: "http://pic.maimengjun.com/beb1aef941f061f813c5926defb1c843_123297.jpeg"
          },
          {
            image: "http://pic.maimengjun.com/2f75c0c78a03816317a82ec407fc9d69_208347.jpeg?imageView2/1/q/75/w/400/h/570"
          },
          {
            image: "http://pic.maimengjun.com/d0bb7cee34e57f358e0345d048778e13_130330.jpg?imageView2/1/q/75/w/400/h/566"
          }
        ]
      }
    },

    components: {
      NavHeader,
      BackTop,
      Loading
    },

    created() {
      this.popularity();
      this.urge();
      this.collect();
      this.click();
      this.an();
    },

    methods: {
      popularity() {
        this.axios.get(
            'https://api.maimengjun.com/index.php?r=cartoonBillBoard/getCartoonSetListByBillBoard&id=11&page=1&size=10'
          )
          .then(data => {

            this.list = this.list.concat(data.data.results)
            setTimeout(() => {
              this.showLoading = false
            }, 300)
          })
          .catch(err => {
            console.log(err)

          })
      },

      // 催更榜
      urge() {
        this.axios.get('https://api.maimengjun.com/index.php?r=cartoonBillBoard/getCartoonSetListByBillBoard&id=12')
          .then(data => {
            this.expedite = this.expedite.concat(data.data.results)
            setTimeout(() => {
              this.showLoading = false
            }, 300)
          })
          .catch(err => {
            console.log(err)
          })
      },
      //   收藏榜
      collect() {
        this.axios.get('https://api.maimengjun.com/index.php?r=cartoonBillBoard/getCartoonSetListByBillBoard&id=4')
          .then(data => {
             this.enshrine = this.enshrine.concat(data.data.results)
            setTimeout(() => {
              this.showLoading = false
            }, 300)
          })
          .catch(err => {
            console.log(err)
          })
      },
      // 点击榜
      click() {
        this.axios.get('https://api.maimengjun.com/index.php?r=cartoonBillBoard/getCartoonSetListByBillBoard&id=1')
          .then(data => {
            this.dian = this.dian.concat(data.data.results)
            setTimeout(() => {
              this.showLoading = false
            }, 300)
          })
          .catch(err => {
            console.log(err)
          })
      },
      //    安利榜
      an() {
        this.axios.get('https://api.maimengjun.com/index.php?r=cartoonBillBoard/getCartoonSetListByBillBoard&id=3')
          .then(data => {
             this.li = this.li.concat(data.data.results)
             setTimeout(() => {
              this.showLoading = false
            }, 300)
          })
          .catch(err => {
            console.log(err)
          })
      }
    }
  }

</script>
<style scoped>
  .mr-root {
    overflow: hidden;
    width: 100%;
  }
  
  .el-carousel {
    width: 100%;
  }
  
  .el-carousel-item img {
    width: 100%;
    height: 100%;
  }
  
  .important {
    height: 3.2rem;
    overflow: hidden;
  }
  
  #one {
    height: 3.2rem;
    overflow: hidden;
  }
  
  .show {
    padding: 60px;
  }
  
  .tu {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url(../assets/1-140105134949-51.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  
  .list {
    font-size: 0.3rem;
    margin-top: 0.2rem;
    white-space: nowrap;
    text-overflow: hidden;
    overflow: hidden;
  }
  
  .list span:nth-child(1) {
    display: inline-block;
    font-size: 0.4rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0.2rem;
    text-align: center;
    background: red;
    color: white;
  }
  
  .float {
    float: right;
    position: relative;
    top: 0.3rem;
    border: solid 1px black;
    border-radius: 0.2rem;
    padding: 0.1rem;
    box-sizing: border-box;
  }
  
  .tupian {
    margin-top: 0.5rem;
    height: 4rem;
  }
  
  .el-carousel-item {
    width: 100%;
  }
  
  .tupian img {
    width: 100%;
    height: 100%;
  }
  
  .p {
    font-size: 0.5rem;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
  }
</style>